import { memo, useEffect, useState } from "react";
import { PageContainer } from "@ant-design/pro-components";
import "dayjs/locale/zh-cn";
import { useGetOrdersByOrg } from "../../service/dataPanel";
import { OrderType } from "../../types/order";
import dayjs from "dayjs";
import DataPanelStyle from "./style.ts";
import { Col, Row } from "antd";
import SalesSittuation from "./cpms/salesSituation";
import { shallowEqual, useSelector } from "react-redux";
import { RootState } from "../../store";
import StudentSittuation from "./cpms/studentSituation";
import SpendRank from "./cpms/spendRank";

const DataPanel = memo(() => {
  const [orders, setOrders] = useState<OrderType[]>([]);
  const { getOrders, data, loading } = useGetOrdersByOrg();
  const { org } = useSelector(
    (state: RootState) => ({
      org: state.orgReducer.currentOrg
    }),
    shallowEqual
  );
  useEffect(() => {
    if (data) {
      setOrders(data);
    }
  }, [data]);
  useEffect(() => {
    getOrders();
  }, [org]);
  return (
    <DataPanelStyle>
      <PageContainer
        title="数据面板"
        loading={loading}
        content={<span className="currentYear">{dayjs().year()}年度数据</span>}
      >
        <Row style={{ marginBottom: "20px" }}>
          <SalesSittuation orders={orders} />
        </Row>
        <Row gutter={20}>
          <Col span={12}>
            <StudentSittuation orders={orders} />
          </Col>
          <Col span={12}>
            <SpendRank orders={orders} />
          </Col>
        </Row>
      </PageContainer>
    </DataPanelStyle>
  );
});

export default DataPanel;
